<template>
    <div class="mt-2 mb-2">
        <v-row class="pb-4 d-none d-md-flex">
            <v-card width="100%" flat outlined>
                <v-card-actions>
                    <v-btn-toggle v-model="tips" tile color="deep-purple accent-3" group>
                        <v-btn value="left">
                            Left
                        </v-btn>

                        <v-btn value="center">
                            Center
                        </v-btn>

                        <v-btn value="right">
                            Right
                        </v-btn>

                        <v-btn value="justify">
                            Justify
                        </v-btn>
                    </v-btn-toggle>
                </v-card-actions>
            </v-card>
        </v-row>
        <v-row>
            <v-alert
      color="#C51162"
      dark
      icon="mdi-material-design"
      border="right"
      width="100%"
      v-show="alert.visiable"
    >
      {{alert.msg}}
    </v-alert>
            <v-col sm="12" md="3"  v-for="item of recods" :key="item.id">
                <v-card minWidth="200" maxWidth="700" flat outlined shaped @click="skip_detail(n)">
                    <v-img :aspect-ratio="1/1" :src="item.image_url"
                        class="d-none d-md-flex"></v-img>
                    <v-card-title>{{item.title}}</v-card-title>
                    <v-card-text>
                        <div class="mt-2">
                            <v-row>
                                <v-col cols="10" class="mt-0 mb-0 pt-0 text--disabled">
                                    {{item.create_time}}
                                </v-col>
                                <v-spacer></v-spacer>
                            </v-row>
                            <v-row>
                                <v-spacer></v-spacer>
                                <v-col cols="3" class="pt-1 text--secondary">
                                    <v-icon color="green">mdi-eye</v-icon><span>{{item.read_count}}</span>
                                </v-col>
                                <v-col cols="3" class="pt-1 text--secondary">
                                    <v-icon color="orange">mdi-comment</v-icon><span>10</span>
                                </v-col>
                                <v-col cols="3"  class="pt-1 text--secondary">
                                    <v-icon color="red">mdi-heart</v-icon><span>10</span>
                                </v-col>
                            </v-row>
                        </div>
                    </v-card-text>
                </v-card>
            </v-col>
        </v-row>
        <template>
            <div class="text-center mt-8">
                <v-pagination v-model="page" :length="15" :total-visible="7"></v-pagination>
            </div>
        </template>
        
    </div>
</template>

<script>
    // @ is an alias to /src
    //import HelloWorld from '@/components/HelloWorld.vue'

    export default {
        name: 'Home',
        components: {
            //HelloWorld
        },
        data: function () {
            return {
                loading: false,
                page: 1,
                tips: "left",
                alert:{
                    visiable:false,
                    msg:""
                },
                recods:[]
            }
        },
        methods:{
            skip_detail(id){
                this.$router.push("/detail?"+id)
            },
            getData(){
                let that = this
                this.axios.get(this.$store.state.base_url+"/article/list").then(function (response) {
                    console.log(response);
                    if(response.data.code==200){
                        that.recods = response.data.data
                    }else{
                        that.alert.msg="获取数据失败"
                        that.alert.visiable=true
                    }
                    
                }).catch(function(error){
                    that.alert.msg=error
                    that.alert.visiable=true
                })
            }
        },
        created(){
            this.$emit("hideBackToTop")
            this.getData()
        }
    }
</script>